<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .root,
      .parent,
      .son {
        padding: 50px;
      }

      .son {
        width: 100px;
        height: 100px;
        background-color: green;
      }

      .parent {
        background-color: pink;
      }

      .root {
        background-color: aqua;
      }
    </style>
  </head>

  <body>
    <!-- 
      说一下 Vue 组件的通信方式有哪些？

        1. 父子组件
          1. 父到子，使用 props
          2. 子到父，使用 emit 触发自定义事件

        2. 非父子组件
          1. 状态提升，将数据定义在共同的父组件上。
          2. 依赖注入
          3. 中央事件总线【一种发布订阅模式的使用】

        3. 更复杂的情况
          1. 状态管理器：Vuex、Pinia
          2. this.$root       获取根组件实例
          3. this.$parent     获取父组件实例
          4. ref              标记子组件，获取子组件的实例
          5. this.$children   获取所有子组件的实例数组    【Vue2】


     -->

    <div id="app"></div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      const app = createApp({
        data() {
          return {
            name: "张",
          };
        },

        template: `
          <div class="root">
            <p>Root</p>
            <hr />

            <Parent />
          </div>
        `,
      });

      app.component("Parent", {
        data() {
          return {
            count: 1,
          };
        },
        template: `
          <div class="parent">
            <p>Parent - {{ count }}</p>
            <button @click="getChildren">获取 $children</button>
            <button @click="getMySon">获取 mySon</button>

            <hr />

            <Son ref="mySon"/>
          </div>
        `,

        methods: {
          getChildren() {
            console.log("this.$children", this.$children);
          },

          getMySon() {
            this.$refs.mySon.msg += "~";
          },
        },
      });

      app.component("Son", {
        data() {
          return {
            msg: "son",
          };
        },
        template: `
          <div class="son">
            <p>Son - {{ msg }}</p>
          </div>
        `,

        created() {
          // 通过 this.$parent 直接获取父组件实例
          console.log("this.$parent", this.$parent);
          console.log("this.$root", this.$root);
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
